<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>首页</h1>

    <div>
        <button onclick="hello()">访问/hello</button>
        <button onclick="hi()">访问/hi</button>
        <button onclick="list()">访问/list</button>
        <button onclick="deleteBook()">访问/delete</button>
        <button onclick="logout()">登出</button>
    </div>



    <script>

        let token;

        function request(url,type,fn) {
            $.ajax({
                url:url,
                beforeSend: function(request){
                    request.setRequestHeader("token", token);
                },
                type: type,
                success: fn
            })
        }

        function login() {
            let username = $('#username').val();
            let password = $('#password').val();
            $.post('doLogin',{'userName':username,'password':password},function (data) {
                console.log(data)
                token = data.data.token;
            })
        }

        function hello() {
            $.ajax({
                url:'hello',
                beforeSend: function(request){
                    request.setRequestHeader("token", token);
                },
                type: 'GET',
                success: function (data) {
                    console.log(data)
                }
            })
        }

        function hi() {
            request('hi','GET',function (data) {
                console.log(data)
            })
        }

        function list() {
            request('list','GET',function (data) {
                console.log(data)
            })
        }

        function deleteBook() {
            request('delete','GET',function (data) {
                console.log(data)
            })
        }

        function logout() {
            request('doLogout','post',function (data) {
                console.log(data)
            })
        }
    </script>
</body>
</html>